import Taro from '@tarojs/taro';
import { View, Image, Text, Picker } from '@tarojs/components';
import http from '@/utils/http';
import utils from '@/utils/util'
import './index.scss'

import NewRecordItem from '@/components/newRecordItem/index';
import StatusPages from '@/components/statusPages/index';
import MoreFooter from '@/components/moreFooter/index';

class signRecord extends Taro.Component {
    constructor() {
        super();
        const now = new Date();
        this.state = {
            dataArr: [],
            pagesize: 10,
            moreType: 'none',
            statusType: 'none', // none 不显示空白页  empty //显示空白页
            statuserro: false, // 是否显示错误页
            pageNumber: 1,
            changdata: `${now.getFullYear()}-${now.getMonth() + 1 < 10 ? '0' + (now.getMonth() + 1) : now.getMonth() + 1}`,
            signRecordArr: []
        }
    }
    componentWillMount() {
        const now = new Date();
        let defaults = now.getFullYear();
        let month = now.getMonth() + 1;
        let dataArr = [];
        (defaults === 2019 ? '1' : '111').split('').map(() => {
            if (defaults === now.getFullYear()) {
                for (let index = 1; index <= month; index++) {
                    dataArr.push(defaults + '-' + `${index < 10 ? '0' + index : index}`)
                }
                dataArr.reverse();
            } else {
                for (let index = 12; index > 0; index--) {
                    dataArr.push(defaults + '-' + `${index < 10 ? '0' + index : index}`)
                }
            }
            defaults--;
        })
        this.setState({
            dataArr
        })
    }
    componentDidMount() {
        this.refresh();
    }
    config = {
        navigationBarTitleText: '巡检记录',
        enablePullDownRefresh: true
    }
    refresh() { //下拉刷新
        var {
            moreType
        } = this.state;
        if (moreType != "loading") {
            this.setState({
                pageNumber: 1,
                moreType: 'none'
            }, () => {
                this.getCheckLogs();
            })
        }
    }
    onPullDownRefresh() {
        this.refresh();
    }
    onReachBottom() { //滚动触底加载
        let {
            moreType,
            pageNumber,
        } = this.state;
        if (moreType == "showText") {
            pageNumber = pageNumber + 1;
            this.setState({
                pageNumber,
                moreType: "loading"
            }, () => {
                this.getCheckLogs();
            });
        }
    }
    getCheckLogs() {
        let { changdata, pageNumber, pagesize, moreType, signRecordArr } = this.state;
        http.get('getCheckLogs', {
            dateStr: changdata,
            pageNumber,
            pagesize
        }).then((d) => {
            Taro.stopPullDownRefresh();
            var list = d.datas.pageRes || [];
            list.map((item)=>{
                item.checktime = item.checktime.replace(/-/g, "/");
                const date = item.checktime && new Date(item.checktime) || new Date();
                const month = date.getMonth() + 1;
                const day = date.getDate();
                const hour = date.getHours();
                const minute = date.getMinutes();
                item.time = utils.addZero(hour) + ':' + utils.addZero(minute)
                item.months = utils.addZero(month) + '月' + utils.addZero(day) + '日';
            })
            moreType = "showText";
            list.length < pagesize ? moreType = "noMore" : moreType;
            if (pageNumber != 1) {
                list = signRecordArr.concat(list);
            }
            this.setState({
                moreType,
                statusType: list.length > 0 ? 'none' : 'empty',
                statuserro: false,
                signRecordArr: list
            });
        }).catch((e) => {
            console.log(e);
            Taro.stopPullDownRefresh();
            this.setState({
                moreType: signRecordArr.length > 0 ? 'error' : 'none',
                statusType: signRecordArr.length > 0 ? 'none' : 'empty',
                statuserro: signRecordArr.length > 0 ? false : true,
            })
        })
    }
    onChange(e) {
        const { dataArr } = this.state;
        this.setState({
            changdata: dataArr[e.detail.value]
        }, () => {
            this.getCheckLogs();
        })
    }
    toDetails(e,item) {
        Taro.navigateTo({
            url: `/pages/signinDetails/index?id=${item.id}`
        })
    }
    render() {
        const { signRecordArr, dataArr, changdata, statusType, statuserro, moreType } = this.state;
        return (
            <View className='record-box ov_h'>
                <View className='pl-3 pr-3 length-box ft28 flex flex-r flex-item-between flex-item-v-center mt-2-5'>
                    <Text className='ft_w600 fc_53C ft32'>本月巡检签到{signRecordArr.length}次</Text>
                    <Picker mode='selector' range={dataArr} onChange={(e) => { this.onChange(e) }}>
                        <View className='fc_999 flex flex-item-center' >
                            <Image className='date-icon' src={require('../../assets/imgs/sigin/qdjl_icon_rl.png')}></Image>
                            <Text className='pl-2 pr-3'>{changdata}</Text>
                        </View>
                    </Picker>
                </View>
                <StatusPages mt='mt-20'
                  refresh={() => { this.refresh()}}
                  statusType={statusType}
                  statuserro={statuserro}
                  isVh100={signRecordArr.length < 0 && statuserro ? true : false}
                ></StatusPages>
                <View className='pl-2-5 pr-2-5 mt-2-5'>
                    {
                        signRecordArr.map((item) => {
                            return (
                                <NewRecordItem signRecord={item} key={item.id} toDetails={(e, name) => { this.toDetails(e, name) }} ></NewRecordItem>
                            )
                        })
                    }
                </View>
                {signRecordArr.length && <MoreFooter moreType={moreType} restloading={() => { this.getMedicalkits() }} ></MoreFooter>}
            </View>
        );
    }
}

export default signRecord;
